<template>
  <div class="infood">
    <h2>
      一日三餐 ·
      <span v-html="hao">{{hao}}</span>
    </h2>
    <div id="tabs">
      <ul id="sancan">
        <li @click="zao">早餐</li>
        <li @click="wu">午餐</li>
        <li @click="wan">晚餐</li>
      </ul>
      <div id="zao" v-if="num==1">
        <router-link
          tag="li"
          v-for="(zaodata,index) in zaoNoteList"
          v-show="index<4"
          :key="zaodata.noteId"
          :to="{ name: 'Note', params: { id: zaodata.noteId } }"
        >
          <span class="noteId">{{zaodata.noteId}}</span>
          <div class="img_2">
            <img :src="'/api/upload/' + zaodata.noteImg1" alt />
          </div>
          <p>
            <span class="wen">{{zaodata.noteTitle}}</span>
            <br />
            <span>{{zaodata.noteContent}}</span>
          </p>
        </router-link>
        <button @click="open(10002)" class="bbtn">ggdf</button>
      </div>
      <div id="wu" v-else-if="num==2">
        <router-link
          tag="li"
          v-for="(wudata,index) in wuNoteList"
          v-show="index<4"
          :key="wudata.noteId"
          :to="{ name: 'Note', params: { id: wudata.noteId } }"
        >
          <span class="noteId">{{wudata.noteId}}</span>
          <div class="img_3">
            <img :src="'/api/upload/' + wudata.noteImg1" alt />
          </div>
          <p>
            <span class="wen1">{{wudata.noteTitle}}</span>
            <br />
            <span>{{wudata.noteContent}}</span>
          </p>
        </router-link>
        <button @click="open(10002)" class="bbtn">ggdf</button>
      </div>
      <div id="wan" v-else-if="num==3">
        <router-link
          tag="li"
          v-for="(wandata,index) in wanNoteList"
          v-show="index<4"
          :key="wandata.noteId"
          :to="{ name: 'Note', params: { id: wandata.noteId } }"
        >
          <span class="noteId">{{wandata.noteId}}</span>
          <div class="img_4">
            <img :src="'/api/upload/' + wandata.noteImg1" alt />
          </div>
          <p>
            <span class="wen2">{{wandata.noteTitle}}</span>
            <br />
            <span>{{wandata.noteContent}}</span>
          </p>
        </router-link>
        <button @click="open(10002)" class="bbtn">ggdf</button>
      </div>
    </div>
  </div>
</template>
<style lang="css" scoped>
h2 {
  font-size: 20px;
  color: #E6A23C;
  font-weight: 700;
  line-height: 48px;
  margin-left: 15px;
}

.infood {
  clear: both;
}

#tabs #sancan {
  display: block;
  height: 50px;
  line-height: 50px;
  border-bottom: 2px saddlebrown solid;
}
#tabs #sancan li {
  background: #fff;
  cursor: pointer;
  line-height: 50px;
  list-style: none;
  height: 50px;
  margin: 0px 3px;
  border: 1px solid #aaa;
  border-bottom: none;
  display: inline-block;
  width: 10%;
  text-align: center;
  font-size: 18px;
}
#tabs #sancan li.on {
  border-top: 2px solid saddlebrown;
  border-bottom: 2px solid #fff;
}
#tabs div {
  line-height: 25px;
  /* border: 1px solid #336699; */
  border-top: none;
  padding-top: 3px;
}
.img_2,.img_3,.img_4{
  width: 90%;
  height: 300px;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
}
#zao img,
#wu img,
#wan img {
  cursor: pointer;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
}
.img_2:hover,
.img_3:hover,
.img_4:hover {
  border-radius: 5px;
  box-shadow: 5px 5px 5px 4px #ccc;
}
#zao li:nth-child(1),
#wu li:nth-child(1),
#wan li:nth-child(1) {
  margin-left: 0;
}
#zao li,
#wu li,
#wan li {
  list-style: none;
  float: left;
  width: 25%;
  text-align: center;
}
#zao p,
#wu p,
#wan p {
  margin-top: 15px;
  margin-left: 5px;
  line-height: 1.5em;
  text-align: left;
  margin-left: 20px;
}
#zao p a,
#wu p a,
#wan p a {
  display: inline-block;
  text-decoration: none;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#zao p a:hover,
#wu p a:hover,
#wan p a:hover {
  color: #E6A23C;
}
#zao span,
#wu span,
#wan span {
  color: rgb(170, 170, 170);
  display: inline-block;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#zao .noteId,
#wu .noteId,
#wan .noteId {
  display: none;
}
#zao .wen,
#wu .wen1,
#wan .wen2 {
  color: black;
  font-size: 18px;
}
#zao p .wen:hover,
#wu p .wen1:hover,
#wan p .wen2:hover {
  color: #E6A23C;
  cursor: pointer;
}
.bbtn{
  opacity: 0;
}
</style>
<script>
export default {
  data() {
    return {
      hao: "早上好",
      num: 1,
      zaoNoteList: [],
      wuNoteList: [],
      wanNoteList: []
    };
  },
  //钩子函数
  created() {
    this.$axios
      .get("/api/createNote/getNote1")
      .then(res => {
        this.zaoNoteList = res.data.data;
        // console.log("zaoNoteList:", this.zaoNoteList);
      })
      .catch(err => {
        console.log("err:", err);
      });
    this.$axios
      .get("/api/createNote/getNote11")
      .then(res => {
        this.wuNoteList = res.data.data;
        // console.log("wuNoteList:", this.wuNoteList);
      })
      .catch(err => {
        console.log("err:", err);
      });
    this.$axios
      .get("/api/createNote/getNote12")
      .then(res => {
        this.wanNoteList = res.data.data;
        // console.log("wanNoteList:", this.wanNoteList);
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  methods: {
    open(id){
      this.$router.push({ path: `/community/notelist/note/${id}` })
    },
    zao() {
      this.num = 1;
      this.hao = "早上好";
    },
    wu() {
      this.num = 2;
      this.hao = "中午好";
    },
    wan() {
      this.num = 3;
      this.hao = "晚上好";
    }
  }
};
</script>